<template>
  <div class="content">
    <div class="bottom app-main-content-box">
      <iframe
        id="iframeId"
        ref="iframeRef"
        :src="iframeUrl"
        style="width: 100%; height: 82vh"
        frameBorder="0"
        @onload="load"
      />
    </div>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
export default {
  props: {
    query: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      iframeUrl: '',
      loadingInstance: null,
      baseUrl:
        process.env.NODE_ENV === 'production'
          ? 'https://diypubpc-test.xiangsaopay.com/#/'
          : 'http://192.168.111.181:8080/#/'
    }
  },
  created() {
    const { page_id, sign, op } = this.query
    const app_token = getToken()
    this.iframeUrl = `${this.baseUrl}?sign=${sign}&page_id=${page_id}&app_token=${app_token}&op=${op}`
    if (op === 'edit' || op === 'copy') {
      const { pageJson, status } = this.query
      this.pageJson = pageJson
      this.status = status
    }
  },
  mounted() {
    const { op } = this.query
    if (op === 'edit' || op === 'copy') {
      const iframe = document.querySelector('#iframeId')
      iframe.onload = () => {
        console.log('加载完成') // 这里偶尔不会触发
        this.$nextTick(() => {
          this.load()
        })
      }
    }
    this.handleAddListener()
  },
  methods: {
    load() {
      this.$refs.iframeRef.contentWindow.postMessage(
        { pageJson: this.pageJson, status: this.status },
        this.baseUrl
      )
    },
    handleAddListener() {
      window.onmessage = (event) => {
        this.handleReceiveMessage(event)
      }
    },
    handleReceiveMessage(event) {
      window.removeEventListener('message', this.handleReceiveMessage)
      if (event.data.sign === 'backRouter') {
        this.$emit('handleBackRouter')
      }
      if (event.data.sign === 'message') {
        const { op } = event.data.params
        const messageOp = {
          message: ({ type, content, title }) =>
            this.$message({
              type,
              message: content,
              title
            }),
          notification: ({ type, content, title }) =>
            this.$notify({ type, message: content, title }),
          loading: ({ type, content, title }) => {
            this.loadingInstance = this.$loading({
              fullscreen: true,
              lock: true,
              text: content,
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
            })
          },
          loadingClose: () => {
            this.loadingInstance.close()
          }
        }
        messageOp[op](event.data.params)
      }
      console.log('接收数据', event.data)
      this.$nextTick(() => {
        this.handleAddListener()
      })
    }
  },
  search() {},
  // 重置
  reset() {}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
/* tab */
.content {
  ::v-deep {
    .el-tabs__header {
      margin-bottom: 10px;
      background-color: #fff;
      border-radius: 0 0 5px 5px;
    }

    .el-tabs__active-bar {
      height: 4px;
    }
  }
}

.app-main-content-box {
  padding: 0;
}
</style>
